<template>
  <div>
    <!-- 点击转移到那边去 -->
    <div class="info">
      <div class="info-list">
        <div class="info-list-box" id="infomationTitleBox">
          <ul class="info-list-ul" id="infomationTitleUl" :style="imageLeft">
            <li :class="item.isHighlight ? 'info-list-li highlight' : 'info-list-li'" v-for="item,index in imgUrlList" :key="item.id + index" :id="'infomation' + index"
              @click="clickTitle(item, index)">
              <img :src="item.url" alt="" style="width:100px;height:100px">
            </li>
          </ul>
        </div>
      </div>
      <div class="left" style="padding:20px;color:pink;cursor: pointer;" @click="leFt"> <i title="上一张" class="el-icon-arrow-left">左边</i></div>
      <div class="right" style="padding:20px;color:pink;cursor: pointer;" @click="rigHt"> <i title="下一张" class="el-icon-arrow-right">右边</i></div>
      <img :src="isShowUrl" alt="">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleList: [
        { title: "最新", isHighlight: true },
        { title: "电影推荐", isHighlight: false },
        { title: "濒危动物", isHighlight: false },
        { title: "爱豆说环保", isHighlight: false },
        { title: "环保书籍", isHighlight: false },
        { title: "在线咨询", isHighlight: false },
        { title: "政策文件", isHighlight: false },
        { title: "低碳视频", isHighlight: false },
        { title: "低碳艺术", isHighlight: false },
        { title: "低碳标讯", isHighlight: false },
        { title: "低碳福建", isHighlight: false },
        { title: "低碳上海", isHighlight: false },
        { title: "低碳北京", isHighlight: false },
        { title: "低碳深圳", isHighlight: false },
        { title: "低碳广州", isHighlight: false },
        { title: "低碳天津", isHighlight: false },
        { title: "低碳杭州", isHighlight: false },
        { title: "低碳南京", isHighlight: false },
        { title: "低碳湖北", isHighlight: false },
        { title: "低碳茂名", isHighlight: false },
        { title: "低碳湛江", isHighlight: false },
        { title: "低碳广州", isHighlight: false },
        { title: "低碳深圳", isHighlight: false },
        { title: "低碳达泰", isHighlight: false },
        { title: "低碳汶川", isHighlight: false },
        { title: "低碳四川", isHighlight: false },
      ],
      imgUrlList: [
        {
          url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
          isHighlight: true,
          id: 1,
        },
        {
          url: "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
          isHighlight: false,
          id: 2,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 3,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 4,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 5,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 6,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 7,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 8,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 9,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 10,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 11,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 12,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 13,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 14,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 15,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 16,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 17,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 18,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 19,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 20,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 21,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 22,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 23,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 24,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 25,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 147,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1575,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 155,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1757,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1545,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1645,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1545,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1548,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 1775,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 45,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 452,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 453,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 48,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 49,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
          id: 31,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
          id: 78,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
          id: 98,
        },
        {
          url: "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",
          isHighlight: false,
          id: 983,
        },
        {
          url: "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",
          isHighlight: false,
          id: 981,
        },
        {
          url: "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",
          isHighlight: false,
          id: 983,
        },
        {
          url: "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",
          isHighlight: false,
          id: 9855,
        },
        {
          url: "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",
          isHighlight: false,
          id: 985555,
        },
      ],
      isShowUrl: "",
      imgActiveIndex: 0, // 当前移动图片的索引值
      imgDistance: 0, // 移动的距离
      allDistance: 0, // 总移动距离
    };
  },
  computed: {
    imageLeft() {
      return { left: `${this.imageDistance}px` };
    },
    width() {
      let domWidth =
        document.getElementById("infomationTitleBox").offsetWidth / 2;
      return domWidth;
    },
  },
  mounted() {},
  methods: {
    clickTitle(item, index) {
      // console.log(item)
      this.imgUrlList.forEach((item, index) => {
        item.isHighlight = false;
      });
      item.isHighlight = true;
      let domId = "infomation" + index;
      let domLeft = document.getElementById(domId).offsetLeft;
      let ulDom = document.getElementById("infomationTitleUl");
      // console.log(ulDom)
      if (domLeft > this.width) {
        ulDom.style.left = this.width - domLeft + "px";
      } else {
        ulDom.style.left = 0;
      }
    },
    leFt() {},
    rigHt() {
      if (this.imgActiveIndex < this.imgUrlList.length - 1) {
        this.imgActiveIndex++;
        this.imgUrlList.forEach((item, index) => {
          if (this.imgActiveIndex === index) {
            this.isShowUrl = this.imgUrlList[index].url;
          }
        });
      }
      if (this.imgActiveIndex >= 12) {
        console.log(this.imgActiveIndex);
        // this.allDistance = -80 * (this.imgActiveIndex - 4);
        var index = 0;
        const temp = window.setInterval(() => {
          console.log(this.imgDistance);
          // 边距和图片大小 ===============
          if (index < 40) {
            this.imgDistance -= 2; // 每次向右移动的距离
            index++;
            return;
          } else {
            window.clearInterval(temp);
          }
        }, 1);
        console.log(index, this.imgDistance, this.allDistance);
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.info {
  width: 60%;
  margin: 50px auto;
  .info-list {
    width: 100%;
    .info-list-box {
      width: 100%;
      position: relative;
      overflow: hidden;
      height: 40px;
      .info-list-ul {
        display: flex;
        position: absolute;
        transition: all 0.3s;
        .info-list-li {
          padding: 4px 12px;
          white-space: nowrap;
          cursor: pointer;
        }
        .info-list-li:hover {
          color: #409eff;
        }
        .highlight {
          position: relative;
          background-color: #409eff;
          color: #fff;
        }
        .highlight:hover {
          color: #fff;
        }
        .highlight::after {
          content: "";
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 5px solid #409eff;
        }
      }
    }
  }
}
</style>
